<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      {{title}}
    </template>
    <el-form :model="form" ref="withdrawForm" :rules="withdrawRule" :label-width="formLabelWidth">
      <div v-if="step == 'agree'">
        <el-form-item label="姓名：" :rules="withdrawRule">
          <el-col :span="16">
            <el-input :value="rowData.name" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="银行名称：">
          <el-col :span="16">
            <el-input :value="rowData.bankName"  @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="银行卡号：">
          <el-col :span="16">
            <el-input :value="rowData.cardNo" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开户地址：">
          <el-col :span="16">
            <el-input :value="rowData.address" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="提现确认金额：">
          <el-col :span="16">
            <el-input v-model="rowData.paragraph" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="选择三方出款商户：" prop="merchantId">
          <el-col :span="16">
            <el-select v-model="form.merchantId" @change="doGet({action:'getGrid'})">
              <el-option
                v-for="item in merchantApiList"
                :label="item.displayName"
                :key="item.merchantId"
                :value="item.merchantId"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="三方出款商户余额：" v-if="thirdMerchants.apiSuccess">
          <div>{{thirdMerchants.amount}}</div>
        </el-form-item>
      </div>
      <el-tip style="padding: 10px 0 10px 150px;" v-if="step == 'back'">确定退回 <span style="color:#e6a23c;">{{rowData.name}}</span>
        的提款处理吗?
      </el-tip>
      <el-form-item label="理由：" prop="rejectReason" v-if="step !== 'agree'">
        <el-col :span="16">
          <el-select v-if="step == 'refuse'" v-model="form.rejectReason" placeholder="请选择" size="medium">
            <el-option
              v-for="( item ,index ) in refuseReasons"
              :key="index"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-col :span="16">
          <el-input type="textarea" v-model="form.remark"></el-input>
          <el-tip v-if="step == 'agree'">注1:确认后则三方商户自动出款</el-tip>
          <el-tip v-if="step == 'agree'">注2:选择三方出款商户后，系统自动刷新三方出款商户剩余额度</el-tip>
          <el-tip v-else-if="step == 'refuse'">*确认后则用户前台显示提现失败，提现金额退回中心钱包</el-tip>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'withdrawForm'})" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import { form } from '@/build';
import {
  updateWithdrawNormalStatus, merchantList, accountBalance, withdrawRefuseReasonList,
} from '@/services/api/withdraw';

export default {
  name: 'normal-withdraw-dialog',
  props: ['value', 'id', 'step', 'rowData'],
  mixins: [form],
  data() {
    return {
      formLabelWidth: '150px',
      refuseReasons: [],
      form: {
        status: undefined,
        orderId: this.rowData.orderId,
        merchantId: '',
        rejectReason: '',
      },
      thirdMerchants: {
        amount: 0,
        apiSuccess: false,
      },
      merchantApiList: [],
      withdrawRule: {
        merchantId: [
          { required: true, message: '三方出款商户为必选项', trigger: 'blur' },
        ],
        rejectReason: [
          { required: true, message: '请选择拒绝理由', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    title() {
      switch (this.step) {
        case 'refuse':
          return '拒绝提现申请';
        case 'agree':
          return '提现申请';
      }
    },
  },

  mounted() {
    this.getRefuseReasons();
    this.bindSave(updateWithdrawNormalStatus, 'saveForm', 'form', {
      beforeSend: (data) => {
        switch (this.step) {
          case 'refuse':
            data.status = 2;
            break;
          case 'agree':
            data.status = 1;
            break;
        }
        return data;
      },
      afterSuccess: () => {
        this.cancel();
        this.$parent.gridSearch();
      },
    });
    this.bindGet(merchantList, 'merchantApiList');
    this.bindGet(accountBalance, 'thirdMerchants', {
      action: 'getGrid',
      beforeSend: (data) => {
        this.thirdMerchants = {
          amount: '查询中...',
          apiSuccess: true,
        };
        return { merchantId: this.form.merchantId };
      },
      format: data => ({
        amount: data == -1 ? '不支持三方账户余额查询' : data,
        apiSuccess: this.form.merchantId > 0,
      }),
    });
    this.getAll();
  },
  methods: {
    getRefuseReasons() {
      this.bindGet(withdrawRefuseReasonList, 'refuseReasons', {
        action: 'getRefuseReasons',
        format: (data) => {
          const refuseReasons = [];
          for (const item of data) {
            refuseReasons.push({
              value: item,
            });
          }
          if (this.step !== 'agree') {
            this.form.rejectReason = refuseReasons[0].value;
          }
          return refuseReasons;
        },
      });
    },
    cancel() {
      this.$parent.type = 0;
      this.$parent.doGet({ action: 'setGrid' });
      this.$emit('input', false);
    },
    copy(e) {
      const iptDom = e.target;
      iptDom.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      this.$notify.success({
        title: '复制成功',
        duration: 2000,
      });
    },
  },

};
</script>

<style lang="scss" scoped>
  .el-select{
    width: 100%;
  }
</style>
